import {ScrollView, View, Text, Image, Button} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {AtActionSheet, AtActionSheetItem, AtCurtain} from 'taro-ui';
import 'taro-ui/dist/style/components/curtain.scss';
import 'taro-ui/dist/style/components/action-sheet.scss';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import Tab from './components/tab';
import btnImg from './img/btn.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      windowHeight: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
  }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  getNavHeight() {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    var sysinfo = Taro.getSystemInfoSync();
    let windowHeight = sysinfo.windowHeight;
    let statusBarHeight = sysinfo.statusBarHeight;
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeight = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2;
    this.setState({
      navBarHeight,
      windowHeight,
    });
  }

  render() {
    let {navBarHeight} = this.state;
    let {
      main: {giftName, successModel, errorModel, current},
      actions: {action},
    } = this.props;
    return (
      <View className="packageCommunity">
        <Tab />
        <AtCurtain
          isOpened={successModel}
          onClose={() => {
            action.commonChange('main.successModel', false);
          }}
        >
          <View className="successBox">
            <View>
              <Text className="title"> {current == 0 ? '恭喜完成任务' : '恭喜您获得免费礼包'} </Text>
              <Text className="content">恭喜您获得{giftName}</Text>
            </View>
            <Image
              className="btnIcon"
              mode="widthFix"
              src={btnImg}
              onClick={() => {
                action.commonChange('main.successModel', false);
                Taro.navigateTo({
                  url: '/pages/package-B/myGiftPack/index',
                });
              }}
            />
          </View>
        </AtCurtain>
        <AtCurtain
          isOpened={errorModel}
          onClose={() => {
            action.commonChange('main.errorModel', false);
          }}
        >
          <View className="errorBox">
            <Text className="title">提示</Text>
            <Text className="content">您的领取次数已达上线</Text>
          </View>
        </AtCurtain>
      </View>
    );
  }
}
